<template>
  <div class="num-main">
    <div class="num-card">
      <div>设备总数</div>
      <div class="num">
        {{ resourceNum.equipTotal }}
      </div>
    </div>
    <div class="num-card">
      <div>告警设备</div>
      <div class="num" :class="checkNum(resourceNum.alarmEquip) ? 'red' : ''" @click="openResMonitor('A')">
        {{ resourceNum.alarmEquip }}
      </div>
    </div>
    <div class="num-card">
      <div>服务器数量</div>
      <div class="num">
        {{ resourceNum.serverTotal }}
      </div>
    </div>
    <div class="num-card">
      <div>告警服务器</div>
      <div class="num" :class="checkNum(resourceNum.alarmServer) ? 'red' : ''" @click="openResMonitor('B')">
        {{ resourceNum.alarmServer }}
      </div>
    </div>
    <div class="num-card">
      <div>虚拟机数量</div>
      <div class="num">
        {{ resourceNum.virtualTotal }}
      </div>
    </div>
    <div class="num-card">
      <div>告警虚拟机</div>
      <div class="num" :class="checkNum(resourceNum.alarmVirtual) ? 'red' : ''" @click="openResMonitor('C')">
        {{ resourceNum.alarmVirtual }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
const resourceNum = ref({
  equipTotal: 111,
  alarmEquip: 18,
  serverTotal: 8,
  alarmServer: 5,
  virtualTotal: 25,
  alarmVirtual: 55
});
const checkNum = num => {
  return !!(num && num > 0);
};
// 转至监控管理-云平台资源监控页面
const openResMonitor = type => {
  const name = "monitor_resource";
  const query: any = {};
  switch (type) {
    case "A":
      // 自动筛选出设备资产-存储设备中的告警状态为异常的数据
      if (checkNum(resourceNum.value.alarmEquip)) {
        router.push({ name, query });
      }
      break;
    case "B":
      // 设备资产-服务器，并自动筛选出告警状态为异常的数据
      if (checkNum(resourceNum.value.alarmServer)) {
        router.push({ name, query });
      }
      break;
    case "C":
      // 虚拟化资源-虚拟机，并自动筛选出告警状态为异常的数据
      if (checkNum(resourceNum.value.alarmVirtual)) {
        router.push({ name, query });
      }
      break;
    default:
      break;
  }
};
</script>

<style scoped lang="scss">
@import "../common.scss";
.num-main {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 16px;
  .num-card {
    .red {
      color: red;
      cursor: pointer;
    }
  }
}
</style>
